<template>
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">风险点管理</div>
        <div class="fuse-main" style="margin-bottom: 0.05rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="riskList1" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="风险点名称"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="风险识别人员"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name3"
                label="登记时间"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_bom" style="margin-bottom: 0.15rem">
        <div class="fuse-title">
          风险分级统计
          <!-- <i class="iconfont">&#xe66e;</i> -->
        </div>
        <div class="fuse-main" style="margin-bottom: 0.1rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="riskList" class="backtable" style="width: 100%">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="级别"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="说明"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name3"
                label="表述"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border" style="height: 1.5rem">
        <div class="fuse-title">安全风险点处置管理</div>
        <div class="fuse-main">
          <ul class="resources">
            <li>
              <div>
                <img src="../../../assets/images/jszb.png" alt="" />
                <span>已处置</span>
              </div>
              <div>
                <span>0</span>
                <span>个</span>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../assets/images/jy.png" alt="" />
                <span>未处置</span>
              </div>
              <div>
                <span>0</span>
                <span>个</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fuse-right-side">
      <div class="border fuse-side_middle" style="flex: none; height: 2rem">
        <div class="fuse-title">隐患信息统计</div>
        <div class="fuse-main" style="margin-bottom: 0.2rem">
          <ul class="yjplan">
            <li v-for="(item, index) in planlist" :key="index">
              <p>{{ item.dictLable }}</p>
              <!-- <p>{{ item.sum }}个</p> -->
              <p>0个</p>
              <img :src="item.src" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">隐患巡查管理</div>
        <div class="fuse-main">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="resourcesList" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="隐患描述"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="隐患类型"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="name4"
                label="登记时间"
                show-overflow-tooltip
                width="120"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          隐患排查管理
          <!-- <i class="iconfont">&#xe66e;</i> -->
        </div>
        <div class="fuse-main" style="margin-bottom: 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="dangertypeList" class="backtable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name1"
                label="隐患描述"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name2"
                label="隐患类型"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name3"
                label="登记时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="name4"
                label="逾期时间"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span style="color: red">{{ scope.row.name4 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
import * as echarts from 'echarts'
export default {
  components: {
    HappyScroll
  },
  data() {
    return {
      riskList1: [],
      riskList: [],
      dangertypeList: [],
      planlist: [],
      resourcesList: [],
      dictLable: ''
    }
  },
  mounted() {
    this.getriskdata()
    this.getdangertype()
    this.getresourcesdata()
    this.getPlandata()
    this.getriskdata1()
  },
  methods: {
    // 隐患巡查管理
    getresourcesdata() {
      // this.$http
      // .get('/emergency/sysEmergencyInfo/equipmentTypeInfo')
      // .then(res => {
      //   if (res.code === 200) {
         this.resourcesList=[]
      // this.resourcesList.push(
      //   {
      //     name1: '火灾隐患',
      //     name2: '安全隐患',
      //     name4: '2022-06-30'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name4: '2022-06-29'
      //   },
      //   {
      //     name1: '坍塌隐患',
      //     name2: '安全隐患',
      //     name4: '2022-05-12'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name4: '2022-5-28'
      //   },
      //   {
      //     name1: '坍塌隐患',
      //     name2: '安全隐患',
      //     name4: '2022-05-12'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name4: '2022-5-28'
      //   }
      // )
      //   }
      // })
    },
    // 隐患信息
    getPlandata() {
      this.$http
        .get('/emergency/sysEmergencyPlanInfo/reserveInfo')
        .then(res => {
          if (res.code === 200) {
            this.planlist = res.data
            this.planlist.forEach(item => {
              this.$set(item, 'src', '')
              if (item.dictLable == '综合预案') {
                item.dictLable = '隐患总数'
                item.src = require('../../../assets/images/plan.png')
              } else if (item.dictLable == '专项预案') {
                item.dictLable = '重大隐患'
                item.src = require('../../../assets/images/zhuanxiang.png')
              } else if (item.dictLable == '处置方案') {
                item.dictLable = '逾期隐患'
                item.src = require('../../../assets/images/chuzhi.png')
              }
            })
          }
        })
    },
    // 隐患类型统计
    getdangertype() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
        this.dangertypeList=[]
      // this.dangertypeList.push(
      //   {
      //     name1: '火灾隐患',
      //     name2: '安全隐患',
      //     name3: '2022-07-08',
      //     name4: '2022-06-30'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name3: '2022-06-30',
      //     name4: '2022-06-29'
      //   },
      //   {
      //     name1: '坍塌隐患',
      //     name2: '安全隐患',
      //     name3: '2022-05-21',
      //     name4: '2022-05-12'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name3: '2022-06-05',
      //     name4: '2022-5-28'
      //   },
      //   {
      //     name1: '坍塌隐患',
      //     name2: '安全隐患',
      //     name3: '2022-05-18',
      //     name4: '2022-05-12'
      //   },
      //   {
      //     name1: '运输隐患',
      //     name2: '运输隐患',
      //     name3: '2022-06-30',
      //     name4: '2022-5-28'
      //   }
      // )
      //     }
      //   })
    },
    // 风险点管理
    getriskdata1() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
        this.riskList1=[]
      // this.riskList1.push(
      //   {
      //     name1: '送风口',
      //     name2: '刘毅',
      //     name3: '2022-08-01'
      //   },
      //   {
      //     name1: '猴车下矿口',
      //     name2: '张鑫磊',
      //     name3: '2022-08-02'
      //   },
      //   {
      //     name1: '排水口',
      //     name2: '郝刚',
      //     name3: '2022-08-03'
      //   },
      //   {
      //     name1: '综采点',
      //     name2: '章强强',
      //     name3: '2022-08-04'
      //   },
      //   {
      //     name1: '送风口',
      //     name2: '张耀天',
      //     name3: '2022-08-05'
      //   },
      //   {
      //     name1: '猴车下矿口',
      //     name2: '吴磊',
      //     name3: '2022-08-06'
      //   },
      //   {
      //     name1: '排水口',
      //     name2: '刘倩洗',
      //     name3: '2022-08-07'
      //   },
      //   {
      //     name1: '排水口',
      //     name2: '王琳凯',
      //     name3: '2022-08-09'
      //   },
      //   {
      //     name1: '送风口',
      //     name2: '刘毅',
      //     name3: '2022-08-10'
      //   }
      // )
      //     }
      //   })
    },
    // 风险类型统计
    getriskdata() {
      // this.$http
      //   .get('/emergency/sysEmergencyInfo/getMaterialStatistics')
      //   .then(res => {
      //     if (res.code === 200) {
        this.riskList=[]
      // this.riskList.push(
      //   {
      //     name1: '重大风险',
      //     name2: '极有可能发生',
      //     name3: '每次作业'
      //   },
      //   {
      //     name1: '重大风险',
      //     name2: '极有可能发生',
      //     name3: '每季度都有发生'
      //   },
      //   {
      //     name1: '较大风险',
      //     name2: '可能发生',
      //     name3: '每年都有发生'
      //   },
      //   {
      //     name1: '较大风险',
      //     name2: '较不可能发生',
      //     name3: '年度曾经发生过'
      //   },
      //   {
      //     name1: '较大风险',
      //     name2: '根本不可能发生',
      //     name3: '从未发生'
      //   },
      //   {
      //     name1: '一般风险',
      //     name2: '基本不发生',
      //     name3: '从未发生'
      //   }
      // )
      //     }
      //   })
    }
  }
}
</script>

<style lang="scss" scoped>
.yjplan {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.2rem;
  li {
    width: 1.05rem;
    height: 1.05rem;
    background: url('../../../assets/images/plankuang.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding-top: 0.15rem;
    p {
      margin-bottom: 0.03rem;
    }
    p:nth-child(1) {
      color: #00f6ff;
      font-size: 0.16rem;
    }
    p:nth-child(2) {
      margin: 0.07rem 0;
    }
    img {
      width: 0.3rem;
      height: 0.28rem;
    }
  }
}
.resources {
  display: flex;
  flex-wrap: wrap;
  li {
    flex: 1;
    height: 1rem;
    // background: rgb(231, 52, 85);
    div:nth-child(1) {
      text-align: center;
      img {
        width: 0.25rem;
        height: 0.25rem;
      }
      span {
        vertical-align: super;
        margin-left: 0.05rem;
      }
    }
    div:nth-child(2) {
      width: 100%;
      height: 0.45rem;
      background: url('../../../assets/images/ziyuan.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 0.45rem;
      margin-top: 0.1rem;
    }
  }
}
</style>